<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<%@ include file="/common/dxp/include/common-base.jsp"%>
	<title>${titleName}</title>
</head>
<body class="hold-transition ${sysColor} sidebar-mini">
<div class="wrapper">

	<!-- top start -->
	<%@include file="/common/dxp/top.jsp" %>
	<!-- top end -->

	<!-- left start -->
	<%@include file="/common/dxp/left.jsp" %>
	<!-- left end-->

	<div class="content-wrapper">
		<section class="content">
			<div class="row">
				<div class="col-xs-6 pr2">
					<div class="box box-solid home-box">
						<div class="box-header" style="border-bottom:1px solid #e2e2e2;">
							近10日服务请求成功和失败次数统计
						</div>
						<div class="box-body no-padding">
							<div id="info_div" style="height: 350px"></div>
						</div>
					</div>
				</div>
				<div class="col-lg-6 pl2">
					<div class="box box-solid home-box">
						<div class="box-header" style="border-bottom:1px solid #e2e2e2;">注册数据汇总</div>
						<div class="box-body no-padding">
							<div class="text-center">
								<div id="container_14" class="show-grid" style="height:350px;"></div>
								<div class="pt30 hidden">
									<div class="col-md-4">
										<div class="overview">
											<span class="largeSize black-largeSize" id="span_total_unit">0</span>
											<span class="smallSize">个</span>
										</div>
										<div>
											<span class="smallSize">注册单位</span>
										</div>
									</div>
									<div class="col-md-4">
										<div class="overview">
											<span class="largeSize red-largeSize" id="span_total_sysreg">0</span>
											<span class="smallSize">个</span>
										</div>
										<div>
											<span class="smallSize">注册系统</span>
										</div>
									</div>
									<div class="col-md-4">
										<div class="overview">
											<span class="largeSize xy-largeSize" id="span_total_interface"></span>
											<span class="smallSize">个</span>
										</div>
										<div>
											<span class="smallSize">注册服务/接口</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-6 pr2">
					<div class="box box-solid home-box">
						<div class="box-header" style="border-bottom:1px solid #e2e2e2;">
							近10日服务请求总次数统计
						</div>
						<div class="box-body no-padding">
							<div id="echarts_main" style="height: 350px;"></div>
						</div>
					</div>
				</div>

				<div class="col-lg-6 pl2">
					<div class="box box-solid home-box">
						<div class="box-header" style="border-bottom:1px solid #e2e2e2;">
							服务请求成功次数Top10
							<div class="box-tools pull-right">
								<span><input type="radio" name="input_change_req_count" value="0" onclick="echarts_view(0)"> 当日&nbsp;&nbsp;</span>
								<span><input type="radio" name="input_change_req_count" value="1" onclick="echarts_view(1)"> 当月&nbsp;</span>
								<span><input type="radio" name="input_change_req_count" value="3" checked="checked" onclick="echarts_view(3)"> 近三月&nbsp;&nbsp;</span>
								<span><input type="radio" name="input_change_req_count" value="12" onclick="echarts_view(12)"> 近一年&nbsp;</span>
							</div>
						</div>
						<div class="box-body no-padding">
							<div id="echarts_main_top" style="height:350px;"></div>
						</div>
					</div>
				</div>

				<div style="display: none">
					<select id="dxpUnit" class="form-control  clean" disabled
							data-temp-obj="dxSysReg.userOwner" data-dict-code="dictItemList" data-dict-cate="dxpUnit" data-type-tag="select" data-def=""
							data-name="dxInterfaceReg.userOwner" >
					</select>
					<select id="interfaceCode" class="form-control clean" disabled data-temp-obj="dxInterfaceReg.interfaceCode" data-name="dxInterfaceReg.interfaceCode"
							data-obj-name="dxInterfaceReg" data-dict-code="dymicSql" data-type-tag="select"
							data-colmun="{value:'interfaceCode',text:'interfaceName'}" data-page-name="dx-interface-reg" data-form-name="searchForm"
							data-def="">
					</select>
				</div>
			<script type="text/template" id="dataList-template">
				<? for ( var i = 0; i < rows.length; i++) {?>
					<option value="<?=rows[i].interfaceCode?>"><?=rows[i].interfaceName?></option>
				<?}?>
			</script>
			<script>
				var clickMenu= 'jkgl-req-statistics';
				var userId  = "${loginUser.userId}",userEname="${loginUser.userEname}",orgId  = "${loginUser.orgId}";
				var dictListMap = DictUtil.initDictAndDymic();
				var arrDate = getBeforeDate(10,'arr');
				$(function () {
					getCSstatistics();
					getSuccess();
					var unitCount = Object.keys(dictListMap["dxpUnit"]).length;
					$('#span_total_unit').text(unitCount);
					getSysRegAndInterfaceTotal();
					var defCounts = 3;
					$("input[type='radio'][name='input_change_req_count'][value='"+defCounts+"']").prop('checked',true);
					echarts_view(defCounts);
				})


				function getSuccess() {
					$.ajax({
						type:'get',
						url:common_list_url,
						data: {'pageName': 'dx-data-statistics-type', 'formName': 'statisticsForm','gte':arrDate[0],'lte':arrDate[arrDate.length-1],'statType':'2'},
						dataType: 'json',
						success: function (myData) {
							if(myData.flag == 'T'){
								var xAxisData = arrDate,
										successData = [],
										failureData = [];
								arrDate.forEach(function (items,index) {
									successData.push(myData.rows[0][items]?myData.rows[0][items].success:0);
									failureData.push(myData.rows[0][items]?myData.rows[0][items].failure:0);
								})
								var myChart = echarts.init(document.getElementById('info_div'));
								var option = {
									backgroundColor:'#ffffff',
									title: {
										show: false,
										text: "近10日服务请求成功和失败次数统计",
										top: "30px",
										left: "left"
									},
									tooltip: { //提示框组件
										trigger: 'axis',
										formatter: '{b}<br />{a0}: {c0}次<br />{a1}: {c1}次',
										axisPointer: {
											type: 'shadow',
											label: {
												backgroundColor: '#6a7985'
											}
										},
										textStyle: {
											color: '#fff',
											fontStyle: 'normal',
											fontFamily: '微软雅黑',
											fontSize: 12,
										}
									},
									grid: {
										left: '6%',
										right: '4%',
										//	padding:'0 0 10 0',
										containLabel: true,
									},
									legend: {//图例组件，颜色和名字
										right:'0%',
										top:'0%',
										itemGap: 16,
										itemWidth: 18,
										itemHeight: 10,
										data:[{
											name:'成功',
											//icon:'image://../wwwroot/js/url2.png', //路径
										},
										{
											name:'失败',
										}],
										textStyle: {
											color: '#444',
											fontStyle: 'normal',
											fontFamily: '微软雅黑',
											fontSize: 12
										}
									},
									xAxis: [
										{
											type: 'category',
											//	boundaryGap: true,//坐标轴两边留白
											data: xAxisData,
											axisLabel: { //坐标轴刻度标签的相关设置。
												interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
												//	margin:15,
												// textStyle: {
												//     color: '#078ceb',
												//     fontStyle: 'normal',
												//     fontFamily: '微软雅黑',
												//     fontSize: 12,
												// },
												rotate:45,
											},
											axisTick:{//坐标轴刻度相关设置。
												show: false,
											},
											axisLine:{//坐标轴轴线相关设置
												lineStyle:{
													// color:'#fff',
													// opacity:0.2
												}
											},
											splitLine: { //坐标轴在 grid 区域中的分隔线。
												// show: false,
											}
										}
									],
									yAxis: [
										{
											type: 'value',
											splitNumber: 5,
											axisLabel: {
												textStyle: {
													color: '#444',
													fontStyle: 'normal',
													fontFamily: '微软雅黑',
													fontSize: 12,
												}
											},
											axisLine:{
												show: true
											},
											axisTick:{
												show: false
											},
											splitLine: {
												show: true,
												lineStyle: {
													// color: ['#fff'],
													// opacity:0.06
												}
											}

										}
									],
									series : [
										{
											name:'成功',
											type:'bar',
											data: successData,
											barWidth: 10,
											// barGap:0,//柱间距离
											// barCategoryGap: 5,
											label: {//图形上的文本标签
												normal: {
													show: true,
													position: 'top',
													textStyle: {
														color: '#444',
														// fontStyle: 'normal',
														// fontFamily: '微软雅黑',
														// fontSize: 12,
													},
												},
											},
											itemStyle: {
												normal: {
													show: true,
													color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 0,
														// color: '#5768EF'
														color: '#37a2da'
													}, {
														offset: 1,
														color: '#37a2da'
													}]),
													barBorderRadius: 50,
													borderWidth: 0,
												}
											},
										},
										{
											name:'失败',
											type:'bar',
											data:failureData,
											barWidth: 10,
											barGap:'10%',//柱间距离
											// barCategoryGap: 5,
											label: {//图形上的文本标签
												normal: {
													show: true,
													position: 'top',
													textStyle: {
														color: '#444',
														// fontStyle: 'normal',
														// fontFamily: '微软雅黑',
														// fontSize: 12,
													},
												},
											},
											itemStyle: {
												normal: {
													show: true,
													color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
														offset: 0,
														color: '#fb7293'
													}, {
														offset: 1,
														// color: '#69CBF2'
														color: '#fb7293'
													}]),
													barBorderRadius: 50,
													borderWidth: 0,
												}
											},
										}
									]
								};
								myChart.setOption(option);
							}
							console.log(myData,'arrDate111111');
						}
					});
				}
				function getCSstatistics(type) {
					var paramLoadData = {"pageName": "dx-data-statistics-type","formName":"statisticsForm","statType":"3","gte": arrDate[0],"lte":arrDate[arrDate.length-1]};
					$.ajax({
						type: 'get',
						url: ctx+ "/trans/list/",//"/iss/trans/list/"
						data: paramLoadData,
						dataType: 'json',
						success: function (myData) {
							console.log("echarts->"+type,myData);
							var titles=[];
							var datas=[];
							var dict = dictListMap["dx-interface-reg-searchForm"];
							if(myData.rows){
								titles = arrDate;
								arrDate.forEach(function (items,index) {
									datas.push(myData.rows[0][items]?myData.rows[0][items]:0);
								});
							}
							var myChart = echarts.init(document.getElementById("echarts_main"));
							// 指定图表的配置项和数据
							var option = {
								// 标题
								title: {
									show:false,
									text: '近10日服务请求总次数统计'
								},
								grid: { // 控制图的大小，调整下面这些值就可以，
									left: '6%',
									right: '4%',
									y2: 80,
									// y: 20 // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
								},
								// 工具箱
								toolbox: {
									show: true,
									feature:{
										saveAsImage:{
											show:false
										},
										restore:{
											show:false
										},
										dataView:{
											show:false
										},
										dataZoom:{
											show:false
										},
										magicType:{
											type:['line','bar']
										}
									}
								},
								tooltip:{
									trigger:'axis'
								},
								// x轴
								xAxis: {
									data: titles,
									axisLabel: {
										interval:0,
										rotate:45,//倾斜度
										formatter:function(value){
											return value;
											/*var ret = "";//拼接加\n返回的类目项
											var maxLength = 6;//每项显示文字个数
											var valLength = value.length;//X轴类目项的文字个数
											var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
											if (rowN > 1){ //如果类目项的文字大于1行,
												for (var i = 0; i < rowN; i++) {
													var temp = "";//每次截取的字符串
													var start = i * maxLength;//开始截取的位置
													var end = start + maxLength;//结束截取的位置
													//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
													temp = value.substring(start, end) + "\n";
													ret += temp; //凭借最终的字符串
												}
												console.log(ret,'ret')
												return ret;
											} else {
												console.log(value,'ret')
												return value;
											}*/
										}
									}
								},
								yAxis: {
								},
								// 数据
								series: [{
									name: '次数',
									type: 'line',
									data: datas,
									barWidth:20,//柱图宽度
									itemStyle:{
										normal: {
											// barBorderRadius: 10,
											//渐变色
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
												{offset: 0, color: '#5757f9'},                   //柱图渐变色
												{offset: 0.5, color: '#328fff'},                 //柱图渐变色
												{offset: 1, color: '#9ca8ff'},                   //柱图渐变色
											]),
											//柱图上值
											label: {
												show: true,
												position: 'top',
												textStyle: {
													// color: '#800080'
												}
											}
										}
									}
									//,
									// markPoint:{
									//     data:[
									//         {type:'max',name:'最大值'},
									//         // {type:'min',name:'最小值',symbol:'arrow'}
									//     ]
									// }
								}
								]
							};
							// 使用刚指定的配置项和数据显示图表。
							myChart.setOption(option);
						}
					});
				}
				function echarts_view(type) {
					var date = new Date(); //日期对象
					var year = date.getFullYear();
					var dateStart = year;
					if(type==1){
						var month = date.getMonth()+1;
						dateStart += '-' + (month > 9 ? month : ('0'+month)) + '-01';
					} else if(type==3){
						var month = date.getMonth()+1;
						if (parseInt(month) == 1) {//如果是1月份，则取上一年的10月份
							dateStart = (parseInt(year) - 1) + '-10-01';
						}else if (parseInt(month) == 2) {//如果是2月份，则取上一年的11月份
							dateStart = (parseInt(year) - 1) + '-11-01';
						} else if (parseInt(month) == 3) {//如果是3月份，则取上一年的12月份
							dateStart = (parseInt(year) - 1) + '-12-01';
						}else{
							month = month-2;
							dateStart = year +'-'+ (month > 10 ? month : ('0'+month))+ '-01';
						}
					} else if(type==0){
						dateStart = date.format('yyyy-MM-dd');
					} else {
						var month = date.getMonth()+1;
						if(month < 12){
							month = month+1;
							dateStart = (parseInt(year) - 1) +'-'+ (month > 10 ? month : ('0'+month))+ '-01';
						} else {
							dateStart = year +"-01-01";
						}
					}
					//var gteLong = date.format("yyyy-MM-dd");
					console.log('echarts_view',type, dateStart);
					var paramLoadData = {"statType":"4","gte": dateStart,"pageName": "dx-data-statistics-type","formName":"statisticsForm"};
					paramLoadData["rows"]="10";
					$.ajax({
						type: 'get',
						url: ctx+ "/trans/list/",//"/iss/trans/list/"
						data: paramLoadData,
						dataType: 'json',
						success: function (myData) {
							console.log("echarts->"+type,myData);
							var titles=[];
							var datas=[];
							var dict = dictListMap["dx-interface-reg-searchForm"];
							if(myData.rows){
								var rows = myData.rows;
								for(var k in rows){
									titles.push(strUtil.doNull(dict[rows[k].key],rows[k].key));
									datas.push(rows[k].count);
								}
							}
							var myChart = echarts.init(document.getElementById("echarts_main_top"));
							// 指定图表的配置项和数据
							var option = {
								// 标题
								title: {
									show:false,
									text: '服务请求成功次数Top10'
								},
								grid: { // 控制图的大小，调整下面这些值就可以，
									left: '8%',
									right: '4%',
									y2: 80,
									// y: 20 // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
								},
								// 工具箱
								toolbox: {
									show: true,
									feature:{
										saveAsImage:{
											show:false
										},
										restore:{
											show:false
										},
										dataView:{
											show:false
										},
										dataZoom:{
											show:false
										},
										magicType:{
											type:['line','bar']
										}
									}
								},
								tooltip:{
									trigger:'axis'
								},
								// x轴
								xAxis: {
									data: titles,
									axisLabel: {
										interval:0,
										rotate:45,//倾斜度
										formatter:function(value){
											var ret = "";//拼接加\n返回的类目项
											var maxLength = 10;//每项显示文字个数
											var valLength = value.length;//X轴类目项的文字个数
											var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
											if (rowN > 1){ //如果类目项的文字大于1行,
												for (var i = 0; i < 1; i++) {//rowN
													var temp = "";//每次截取的字符串
													var start = i * maxLength;//开始截取的位置
													var end = start + maxLength;//结束截取的位置
													//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
													ret = value.substring(start, end);
													// temp = value.substring(start, end) + "\n";
													// ret += temp; //凭借最终的字符串
												}
												return ret;
											} else {
												return value;
											}
										}
									}
								},
								yAxis: {
								},
								// 数据
								series: [{
									name: '次数',
									type: 'bar',
									data: datas,
									barWidth:20,//柱图宽度
									itemStyle:{
										normal: {
											// barBorderRadius: 10,
											//渐变色
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
												{offset: 0, color: '#5757f9'},                   //柱图渐变色
												{offset: 0.5, color: '#328fff'},                 //柱图渐变色
												{offset: 1, color: '#9ca8ff'},                   //柱图渐变色
											]),
											//柱图上值
											label: {
												show: true,
												position: 'top',
												textStyle: {
													// color: '#800080'
												}
											}
										}
									}
									//,
									// markPoint:{
									//     data:[
									//         {type:'max',name:'最大值'},
									//         // {type:'min',name:'最小值',symbol:'arrow'}
									//     ]
									// }
								}
								]
							};
							// 使用刚指定的配置项和数据显示图表。
							myChart.setOption(option);
						}
					});
				}

				function getSysRegAndInterfaceTotal() {
					$.ajax({
						type: 'get',
						url: common_list_url,
						data: {'pageName': 'dx-sys-reg', 'formName': 'searchForm'},
						dataType: 'json',
						success: function (myData) {
							console.log('sysReg.res', myData);
							if ("T" == myData.flag) {
								$('#span_total_sysreg').text(myData.total);
							}
							$.ajax({
								type: 'get',
								url: common_list_url,
								data: {'pageName': 'dx-interface-reg', 'formName': 'searchForm'},
								dataType: 'json',
								success: function (myData) {
									console.log('interfaceReg.res', myData);
									if ("T" == myData.flag) {
										$('#span_total_interface').text(myData.total);
										initEcharts_dgyh('container_14');
									}
								}
							});
						}
					});
				}

				//多个圆环
				function initEcharts_dgyh(id){
					var chart_container = echarts.init(document.getElementById(id));
					var dataStyle = {
						normal: {
							label: {
								show: false
							},
							labelLine: {
								show: false
							},
							shadowBlur: 0,
							shadowColor: '#f0f0f0'
						}
					};
					var option = {
						// backgroundColor: "#20263f",
						series: [{
							name: '第一个圆环',
							type: 'pie',
							clockWise: false,
							radius: [68, 76],
							itemStyle: dataStyle,
							hoverAnimation: false,
							center: ['16%', '50%'],
							data: [{
								value: $('#span_total_unit').text(),
								label: {
									normal: {
										rich: {
											a: {
												color: '#85CD9E',
												align: 'center',
												fontSize: 18,
												fontWeight: "bold"
											},
											b: {
												color: '#444',
												align: 'center',
												fontSize: 14
											}
										},
										formatter: function(params){
											return "{a|"+params.value+"个}"+"\n\n{b|注册单位}";
										},
										position: 'center',
										show: true,
										textStyle: {
											fontSize: '14',
											fontWeight: 'normal',
											color: '#fff'
										}
									}
								},
								itemStyle: {
									normal: {
										color: '#9fe6b8',
										shadowColor: '#9fe6b8',
										shadowBlur: 0
									}
								}
							}/**, {
								value: 0,
								name: 'invisible',
								itemStyle: {
									normal: {
										color: '#f0f0f0'
									},
									emphasis: {
										color: '#f0f0f0'
									}
								}
							}**/]
						}, {
							name: '第二个圆环',
							type: 'pie',
							clockWise: false,
							radius: [68, 76],
							itemStyle: dataStyle,
							hoverAnimation: false,
							center: ['50%', '50%'],
							data: [{
								value: $('#span_total_sysreg').text(),
								label: {
									normal: {
										rich: {
											a: {
												color: '#ff9f7f',
												align: 'center',
												fontSize: 18,
												fontWeight: "bold"
											},
											b: {
												color: '#444',
												align: 'center',
												fontSize: 14
											}
										},
										formatter: function(params){
											return "{a|"+params.value+"个}"+"\n\n{b|注册系统}";
										},
										position: 'center',
										show: true,
										textStyle: {
											fontSize: '14',
											fontWeight: 'normal',
											color: '#fff'
										}
									}
								},
								itemStyle: {
									normal: {
										color: '#ff9f7f',
										shadowColor: '#ff9f7f',
										shadowBlur: 0
									}
								}
							}]
						}, {
							name: '第三个圆环',
							type: 'pie',
							clockWise: false,
							radius: [68, 76],
							itemStyle: dataStyle,
							hoverAnimation: false,
							center: ['84%', '50%'],
							data: [{
								value: $('#span_total_interface').text(),
								label: {
									normal: {
										rich: {
											a: {
												color: '#8db4f0',
												align: 'center',
												fontSize: 18,
												fontWeight: "bold"
											},
											b: {
												color: '#000000',
												align: 'center',
												fontSize: 14
											}
										},
										formatter: function(params){
											// return "{b|成交统计}\n\n"+"{a|"+params.value+"亿}"+"\n\n{b|增长3%}";
											return "{a|"+params.value+"个}"+"\n\n{b|注册服务/接口}";
										},
										position: 'center',
										show: true,
										textStyle: {
											fontSize: '14',
											fontWeight: 'normal',
											color: '#fff'
										}
									}
								},
								itemStyle: {
									normal: {
										color: '#96bfff',
										shadowColor: '#96bfff',
										shadowBlur: 0
									}
								}
							}]
						}]
					};
					chart_container.setOption(option);
				}
			</script>
		</section>
	</div>
</div>
</body>
</html>